<!DOCTYPE html>
<!--[if IE 7]><html class="ie7" lang="zh"><![endif]-->
<!--[if gt IE 7]><!-->
<html lang="zh">
	<!--<![endif]-->

	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>树型时间轴特效</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		<style type="text/css">
			
			
			
			.timeline ul li.circle1 {
				background-image: url(timeline/circle1.png);
			}
			
			.timeline ul li.circle2 {
				background-image: url(timeline/circle2.png);
			}
			
			.timeline ul li.circle3 {
				background-image: url(timeline/circle3.png);
			}
			
			.timeline ul li.circle4 {
				background-image: url(timeline/circle4.png);
			}

		</style>

	</head>

	<body>
	<div class="page_content">
		<div class="groupTitle"><span>1、基础示例</span></div>
		<div class="timeline">
			<ul>
				<li class="cls highlight">
					<p class="date_time">9月1日</p>
					<p class="intro">Quick UI2.0正式上线</p>
				</li>
				<li class="cls">
					<p class="date_time">8月1日</p>
					<p class="intro">Quick UI2.0 内测开始</p>
				</li>
				<li class="cls">
					<p class="date_time">7月1日</p>
					<p class="intro">新版本皮肤包完成</p>
				</li>
				<li class="cls">
					<p class="date_time">6月1日</p>
					<p class="intro">Quick UI 正式上线</p>
				</li>
				<li class="cls">
					<p class="date_time">5月1日</p>
					<p class="intro">Quick UI 内测开始</p>
				</li>
			</ul>
		</div>
		<div class="groupTitle"><span>2、自定义图标</span></div>
		<div class="timeline">
			<ul>
				<li class="cls circle1">
					<p class="date_time">9月1日</p>
					<p class="intro">Quick UI2.0正式上线</p>
				</li>
				<li class="cls circle2">
					<p class="date_time">8月1日</p>
					<p class="intro">Quick UI2.0 内测开始</p>
				</li>
				<li class="cls circle3">
					<p class="date_time">7月1日</p>
					<p class="intro">新版本皮肤包完成</p>
				</li>
				<li class="cls circle4">
					<p class="date_time">6月1日</p>
					<p class="intro">Quick UI 正式上线</p>
				</li>
			</ul>
		</div>
</div>
</html>